<template>
    <div class="app-container">
        <el-card class="box-card" >
            <!-- 卡片头-->
            <div slot="header" class="clearfix">
                <span style="line-height: 40px">我的日志</span>
                <el-button
                        style="float: right;"
                        type="primary"
                        @click="exportButton"
                        v-if="userButtonIds.indexOf('log.myLog.export') != -1"
                        icon="el-icon-download">日志导出
                </el-button>
            </div>

            <el-calendar id="calendar" v-model="currentDate">
                <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                <template
                        slot="dateCell"
                        slot-scope="{data}">

                    <span>{{ data.day.split('-').slice(2).join('-') }}</span>
                    <!--自定义内容-->
                    <div v-if="workDays.indexOf(data.day) != -1" class="item" >
                        <table style="font-size: 14px;">
                            <tr v-for="(pro,index) in getproList(data.day)" :key="index" @click="getMyLogInfo(pro.proNo,data.day,index)">
                                <td>
                                    <div v-show="pro.reviewStatus == 1" class="circleGreen"></div>
                                    <div v-show="pro.reviewStatus == 0" class="circleRed"></div>
                                </td>
                                <td style="width: 100%">
                                    {{pro.proName}}：{{pro.performanceDaily}}天
                                </td>
                            </tr>
                        </table>
                    </div>
                </template>
            </el-calendar>

            <!--抽屉-->
            <el-drawer
                    title="我的日志详情"
                    :visible.sync="drawer"
                    size="33%"
                    :direction="direction"
                    :before-close="handleClose">
                <div class="app-container" style="height: 88vh;overflow-y: auto">
                    <div style="margin-bottom: 20px;margin-left: 30px">
                        <el-button
                                :type="myLogInfoIndex == 0? 'info': 'primary'"
                                @click="upToMyLog"
                                :disabled="myLogInfoIndex == 0"
                               size="small" >
                            上一篇
                        </el-button>
                        <span style="padding: 15px;font-weight: bold">
                            {{myLogInfo.year}}年{{myLogInfo.month}}月{{myLogInfo.day}}日
                        </span>
                        <el-button
                                :type="myLogInfoIndex == myLoginfos.length-1 ? 'info': 'primary'"
                                @click="downToMyLog"
                                :disabled="myLogInfoIndex == myLoginfos.length-1"
                                size="small">
                            下一篇
                        </el-button>
                        <el-button
                                v-show="myLogInfo.reviewStatus == 0"
                                type="danger"
                                size="small"
                                style="margin-left: 15px"
                                circle>
                            <span style="font-size: 15px;font-weight: bold">待</span>
                        </el-button>
                        <span
                                v-show="myLogInfo.reviewStatus == 1"
                                style="font-size: 14px;color: red;margin-left: 10px">
                             <span v-show="myLogInfo.reviewName !=null && myLogInfo.reviewName != ''">
                                [{{myLogInfo.reviewName}}]
                            </span>
                            已审批
                        </span>
                    </div>
                    <el-form
                            ref="form"
                            :model="myLogInfo"
                            size="small"
                            label-width="80px">
                        <el-form-item label="工作日期">
                            <el-date-picker
                                    v-model="myLogInfo.workDate"
                                    type="date"
                                    disabled
                                    style="width: 250px"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="投入人天">
                            <el-select v-model="myLogInfo.putinDaily"
                                       style="width: 250px"
                                       disabled>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属部门">
                            <el-select v-model="myLogInfo.deptName"
                                       style="width: 250px"
                                       disabled>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="项目编号">
                            <el-select v-model="myLogInfo.proNo"
                                       style="width: 250px"
                                       disabled>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="项目名称">
                            <el-select v-model="myLogInfo.proName"
                                       style="width: 250px"
                                       disabled>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="开发节点">
                            <el-select v-model="myLogInfo.devPoint"
                                       style="width: 250px"
                                       disabled>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="绩效人天">
                            <el-select v-model="myLogInfo.performanceDaily"
                                       style="width: 250px"
                                       disabled>
                            </el-select>
                        </el-form-item>

                        <div style="width: 100%;height: 40px;background-color: lightgrey;text-align: center;margin-bottom: 20px">
                            <b style="line-height: 40px;color: white;">工作内容</b>
                        </div>

                        <el-form-item label="今日工作">
                            <el-input
                                    type="textarea"
                                    v-model="myLogInfo.dailyLog" disabled>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input
                                    type="textarea"
                                    v-model="myLogInfo.remark" disabled>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="明日计划">
                            <el-input
                                    type="textarea"
                                    v-model="myLogInfo.tomorrowPlan" disabled>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </el-drawer>

            <el-dialog title="请选择起/止月份" :visible.sync="dialogFormVisible" width="600px">
                <div style="text-align: center" >
                    <el-form :model="exprotParam" :rules="rules" ref="ruleForm" class="demo-ruleForm" :inline="true" :key="export_key" >
                        <el-form-item required >
                            <el-form-item prop="beginDate">
                                <el-date-picker
                                    v-model="exprotParam.beginDate"
                                    type="month"
                                    format="yyyy-MM"
                                    placeholder="开始月份">
                                </el-date-picker>
                            </el-form-item>
                            <span style="padding-left: 15px;padding-right:20px;line-height: 40px" >-</span>
                            <el-form-item prop="endDate">
                                <el-date-picker
                                    v-model="exprotParam.endDate"
                                    type="month"
                                    format="yyyy-MM"
                                    placeholder="结束月份">
                                </el-date-picker>
                            </el-form-item>
                        </el-form-item>

                        <el-form-item>
                            <el-button v-show="false" type="primary" @click="submitExportParam('ruleForm')"></el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doExport()" >确 定</el-button>
                </div>




            </el-dialog>


        </el-card>
    </div>

</template>
<script>
    import {http_myLogs, http_myLogs_info,http_myLogs_export} from '@/api/myLog'

    export default {
        data() {
            return {
                userButtonIds: JSON.parse(localStorage.getItem("user")).buttonIds,
                drawer: false,
                direction: 'rtl',
                myLogs: [],
                myLoginfos: [],
                myLogInfoIndex: 0,
                dialogFormVisible: false,
                export_key: new Date().getTime(),
                curentUserId: JSON.parse(localStorage.getItem("user")).userId,


                myLogInfo: {
                    workDate: '',
                    putinDaily: '',
                    deptName: '',
                    proNo: '',
                    proName: '',
                    devPoint: '',
                    performanceDaily: '',

                    dailyLog: '',
                    remark: '',
                    tomorrowPlan: '',
                },

                currentDate: null,
                currentMonth: null,

                exprotParam: {
                    beginDate: null,
                    endDate: null,
                },

                rules: {
                    beginDate: [
                        { type: 'date', required: true, message: '请选择开始月份', trigger: 'change' }
                    ],
                    endDate: [
                        { type: 'date', required: true, message: '请选择结束月份', trigger: 'change' }
                    ],
                }
            }
        },
        computed: {
            // 时间高亮的数组
            brightDate() {
                let ary = []
                for (let i in this.calendarData) {
                    ary.push(this.calendarData[i].startDate)
                }
                // console.log(ary)
                return ary
            },
            workDays() {
                let days = []
                this.myLogs.forEach(my => {
                    days.push(my.workDate)
                })
                return days
            },
        },
        methods: {
            selectMyLogs() {
                http_myLogs(this.currentMonth).then(result => {
                    const {data} = result
                    this.myLogs = data
                })
            },
            getproList(day) {
                let pros = []
                this.myLogs.forEach(my => {
                    if (my.workDate == day) {
                        my.proList.forEach(pro => {
                            pros.push(pro)
                        })
                    }
                })
                return pros;
            },
            getMyLogInfo(proNo, today,index) {
            //   console.log(index)
                http_myLogs_info(proNo, today).then(result => {
                    const { data} = result
                    this.myLoginfos = data
                    for (let i = 0; i < this.myLoginfos.length; i++) {
                        let info = this.myLoginfos[i]
                        if (info.workDate.indexOf(today) != -1 && index === i ) {
                            this.myLogInfo = info
                            this.myLogInfoIndex = i
                            break;
                        }
                    }
                    this.drawer = true
                })

            },
            upToMyLog(){
                this.myLogInfo = this.myLoginfos[this.myLogInfoIndex-1]
                this.myLogInfoIndex = this.myLogInfoIndex-1
            },
            downToMyLog(){
                this.myLogInfo = this.myLoginfos[this.myLogInfoIndex+1]
                this.myLogInfoIndex = this.myLogInfoIndex +1
            },
            handleClose() {
                this.drawer = false
            },
            exportButton(){
                this.export_key = new Date().getTime()
                if (this.$refs['ruleForm'] != null) {
                    this.$refs['ruleForm'].clearValidate()
                }
                this.exprotParam = {}
                this.dialogFormVisible = true

            },
            submitExportParam() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        let beginDate = this.dateFormat(this.exprotParam.beginDate)
                        let endDate = this.dateFormat(this.exprotParam.endDate)
                        http_myLogs_export(beginDate,endDate,this.curentUserId)
                        return true
                    } else {
                        // console.log('error submit!!');
                        return false;
                    }
                });
            },
            doExport(){
                let b = this.submitExportParam()
                if (b == true){
                    this.dialogFormVisible = false
                }
            },
            dateFormat(dateData) {
                var date = new Date(dateData)
                var y = date.getFullYear()
                var m = date.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                const time = y + '-' + m
                return time
            }
        },
        created() {
            this.currentMonth = (this.currentMonth == null) ? this.dateFormat(new Date()) : this.currentMonth
            this.selectMyLogs()
        },
        watch:{
            currentDate() {
                this.currentMonth = this.dateFormat(this.currentDate)
                this.selectMyLogs()
            }
        }

    }
</script>
<style type="less" scoped>
    .item{
        display: flex;
        /* justify-content: center; */
        /* align-items: center; */
        margin-top: 10px;
        overflow: auto;
        /* align-self: center; */
    }
    .everyDay {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #409eff;
        color: #fff;
        border-radius: 50%;
    }

    .circleGreen {
        border-radius: 50%;
        display: inline-block;
        margin-right: 6px;
        width: 6px;
        height: 6px;
        background: #6DD400;
    }

    .circleRed {
        border-radius: 50%;
        display: inline-block;
        margin-right: 6px;
        width: 6px;
        height: 6px;
        background: #999999;
    }

    .circlelightgrey {
        border-radius: 50%;
        display: inline-block;
        margin-right: 1px;
        width: 8px;
        height: 8px;
        background: lightgrey;
    }

    .circleRedBig {
        border-radius: 50%;
        display: inline-block;
        margin-right: 1px;
        width: 30px;
        height: 30px;
        background: red;
        position: relative;
        top: 11px;
        left: 20px
    }

    .td2 {
        white-space: nowrap; /*设置不换行*/
        overflow: hidden; /*设置隐藏*/
        text-overflow: ellipsis; /*设置隐藏部分为省略号*/
        width: 100px;
    }

    .td3 {
        white-space: nowrap; /*设置不换行*/
        overflow: hidden; /*设置隐藏*/
        text-overflow: ellipsis; /*设置隐藏部分为省略号*/
        width: 100px;
    }
    .el-table th.gutter {
        display: table-cell !important
    }
    .el-drawer__header span:focus {
        outline: 0!important;
    }

    /deep/ .el-calendar-table__row{
        height: 150px;
    }

    /deep/ .prev{
        width: 150px;
    }
    /deep/ .current{
        width: 150px;
    }
    /deep/ .next{
        width: 150px;
    }

    /deep/ .el-calendar-day{
        height: 150px;
        display: flex;
        flex-direction: column;
        /* align-items: center; */
    }

    /deep/ .el-calendar-day td{
        border: 0 !important;
    }
    /deep/ .el-calendar-day tr td{
        //height: 24px;
        /* line-height: 24px; */
        display: flex;
        align-items: center;
    }
    /deep/ .el-calendar-day tr td:hover{
        color: #409EFF;
    }
    /deep/ .el-calendar-day tr{
       display: flex;
       flex-direction: row;
       align-items: center;
    }

    /*去掉打开抽屉时自动选中标题时的蓝色边框*/
    /deep/.el-drawer__header span:focus {
        outline: 0;
    }

</style>
